﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- ////////////////////////////////////////////////////////////////////
//        *********请尊重我的劳动成果,添加我的著作权*******                                                
//               CreatData: 2017-5-11                            
//               Java Web /:期末作业                            
//               Project: 宿舍管理系统                          
//               软件学院：  学号 ：16171201041                 
//               版权所有：http://allday.gq                     
//               官方邮箱：562015969@qq.com                    
///////////////////////////////////////////////////////////////////// -->










<!--学生信息管理-->
<html>
  
  <head>
    <meta charset="UTF-8">
    <title>Table</title>
    <link rel="stylesheet" href="plugins/layui/css/layui.css" media="all" />
    <link rel="stylesheet" href="css/global.css" media="all">
    <link rel="stylesheet" href="plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="css/table.css" /></head>
  
  <body>
    <div class="admin-main">
      <blockquote class="layui-elem-quote">
        <a href="javascript:;" class="layui-btn layui-btn-small" id="add">
          <i class="layui-icon">&#xe608;</i>添加信息</a>
        <a href="#" class="layui-btn layui-btn-small" id="import">
          <i class="layui-icon">&#xe608;</i>导入信息</a>
        <a href="#" class="layui-btn layui-btn-small">
          <i class="fa fa-shopping-cart" aria-hidden="true"></i>导出信息</a>
        <a href="#" class="layui-btn layui-btn-small" id="getSelected">
          <i class="fa fa-shopping-cart" aria-hidden="true"></i>获取全选信息</a>
        <a href="javascript:;" class="layui-btn layui-btn-small" id="search">
          <i class="layui-icon">&#xe615;</i>搜索</a></blockquote>
      <fieldset class="layui-elem-field">
        <legend>数据列表</legend>
        <div class="layui-field-box layui-form">
          <table class="layui-table admin-table">
            <thead>
              <tr>
                <th style="width: 30px;">
                  <input type="checkbox" lay-filter="allselector" lay-skin="primary"></th>
                <th>姓名</th>
                <th>年龄</th>
                <th>创建时间</th>
                <th>操作</th></tr>
            </thead>
            <tbody id="content"></tbody>
          </table>
        </div>
      </fieldset>
      <div class="admin-table-page">
        <div id="paged" class="page"></div>
      </div>
    </div>
    <!--模板-->
		<script type="text/html" id="tpl">
			{{# layui.each(d.list, function(index, item){ }}
			<tr>
				<td><input type="checkbox" lay-skin="primary"></td>
				<td>{{ item.name }}</td>
				<td>{{ item.age }}</td>
				<td>{{ item.createtime }}</td>
				<td>
					<a href="/detail-1" target="_blank" class="layui-btn layui-btn-normal layui-btn-mini">预览</a>
					<a href="javascript:;" data-name="{{ item.name }}" data-opt="edit" class="layui-btn layui-btn-mini">编辑</a>
					<a href="javascript:;" data-id="1" data-opt="del" class="layui-btn layui-btn-danger layui-btn-mini">删除</a>
				</td>
			</tr>
			{{# }); }}
		</script>
    <script type="text/javascript" src="plugins/layui/layui.js"></script>
    <script>layui.config({
        base: 'js/'
      });

      layui.use(['paging', 'form'],
      function() {
        var $ = layui.jquery,
        paging = layui.paging(),
        layerTips = parent.layer === undefined ? layui.layer: parent.layer,
        //获取父窗口的layer对象
        layer = layui.layer,
        //获取当前窗口的layer对象
        form = layui.form();

        paging.init({
          openWait: true,
          url: 'datas/laytpl_laypage_data.json?v=' + new Date().getTime(),
          //地址可以通过访问action获取json值得参数
          elem: '#content',
          //内容容器
          params: { //发送到服务端的参数
          },
          type: 'GET',
          tempElem: '#tpl',
          //模块容器
          pageConfig: { //分页参数配置
            elem: '#paged',
            //分页容器
            pageSize: 3 //分页大小
          },
          success: function() { //渲染成功的回调
                        layer.msg('获取成功');
          },
          fail: function(msg) { //获取数据失败的回调
            //alert('获取数据失败')
          },
          complate: function() { //完成的回调
            //alert('处理完成');
            //重新渲染复选框
            form.render('checkbox');
            form.on('checkbox(allselector)',
            function(data) {
              var elem = data.elem;

              $('#content').children('tr').each(function() {
                var $that = $(this);
                //全选或反选
                $that.children('td').eq(0).children('input[type=checkbox]')[0].checked = elem.checked;
                form.render('checkbox');
              });
            });

            //绑定所有编辑按钮事件						
            $('#content').children('tr').each(function() {
              var $that = $(this);
              $that.children('td:last-child').children('a[data-opt=edit]').on('click',
              function() {
                layer.msg($(this).data('name'));
              });

            });

          },
        });
        //获取所有选择的列
        $('#getSelected').on('click',
        function() {
          var names = '';
          $('#content').children('tr').each(function() {
            var $that = $(this);
            var $cbx = $that.children('td').eq(0).children('input[type=checkbox]')[0].checked;
            if ($cbx) {
              var n = $that.children('td:last-child').children('a[data-opt=edit]').data('name');
              names += n + ',';
            }
          });
          layer.msg('你选择的名称有：' + names);
        });

        $('#search').on('click',
        function() {
          parent.layer.alert('你点击了搜索按钮')
        });

        var addBoxIndex = -1;
        $('#add').on('click',
        function() {
          if (addBoxIndex !== -1) return;
          //本表单通过ajax加载 --以模板的形式，当然你也可以直接写在页面上读取
          $.get('temp/edit-form.html', null,
          function(form) {
            addBoxIndex = layer.open({
              type: 1,
              title: '添加表单',
              content: form,
              btn: ['保存', '取消'],
              shade: false,
              offset: ['100px', '30%'],
              area: ['600px', '400px'],
              zIndex: 19950924,
              maxmin: true,
              yes: function(index) {
                //触发表单的提交事件
                $('form.layui-form').find('button[lay-filter=edit]').click();
              },
              full: function(elem) {
                var win = window.top === window.self ? window: parent.window;
                $(win).on('resize',
                function() {
                  var $this = $(this);
                  elem.width($this.width()).height($this.height()).css({
                    top: 0,
                    left: 0
                  });
                  elem.children('div.layui-layer-content').height($this.height() - 95);
                });
              },
              success: function(layero, index) {
                //弹出窗口成功后渲染表单
                var form = layui.form();
                form.render();
                form.on('submit(edit)',
                function(data) {
                  console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
                  console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
                  //console.log(data.field) 
                  console.log(data.field)
                  //当前容器的全部表单字段，名值对形式：{name: value}
                  //调用父窗口的layer对象
                  layerTips.open({
                    title: '这里面是表单的信息',
                    type: 1,
                    content: JSON.stringify(data.field),
                    area: ['500px', '300px'],
                    btn: ['添加', '取消'],
                    yes: function(index, layero) { //11
                      if (window.XMLHttpRequest) {
                        // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
                        xmlhttp = new XMLHttpRequest();
                        console.log("success for 111");
                      } else {
                        // IE6, IE5 浏览器执行代码
                        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
                        console.log("success for 222");

                      }
                      xmlhttp.onreadystatechange = function() {
                        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                          console.log("success：context：：：" + xmlhttp.responseText);
                          layerTips.msg('添加成功');
                          layerTips.close(index);
                          location.reload(); //刷新

                        }
                      }
                      xmlhttp.open("GET", "https://api.i-meto.com/mecho", true);
                      xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
                      xmlhttp.send("encode=js-html&length=2" + JSON.stringify(data.field));
                      console.log("已发送");

                    } //11
                  });
                  //这里可以写ajax方法提交表单
                  return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。									
                });
                //console.log(layero, index);
              },
              end: function() {
                addBoxIndex = -1;
              }
            });
          });
        });

        $('#import').on('click',
        function() {
          var that = this;
          var index = layer.tips('只想提示地精准些', that, {
            tips: [1, 'white']
          });
          $('#layui-layer' + index).children('div.layui-layer-content').css('color', '#000000');
        });
      });</script>
  </body>

</html>